import {NavBar, Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";
import {Form, Button, InputNumber, Input, TextArea, Rate, Uploader} from '@nutui/nutui-react'
import {useState} from "react";
import axios from "axios";

export default function SetComment() {
    const navigate = useNavigate();
    const uploadUrl = 'http://localhost:3000/fxs/upload'
    const [shopRate, setShopRate] = useState(0);
    const [goodsRate, setGoodsRate] = useState(0);
    const [serviceRate, setServiceRate] = useState(0);
    const [comment, setComment] = useState('');
    const [userId, setUserId] = useState(sessionStorage.getItem('userId')||'670637e24b51aa7b2e437c1e');
    const [goodsId, setGoodsId] = useState(sessionStorage.getItem('shopId')||'66eac6780dc3532ceaa24d02');
    const [commentObj, setCommentObj] = useState({});
    const [imgList, setImgList] = useState([]);
    const [imgUrl, setImgUrl] = useState('');
    const back = () => {
       navigate(-1);
    }
    const onSuccess=(res)=>{
        console.log(res);
        setImgUrl(res.data);
    }
    const onFinish = async(values) => {
        // setCommentObj({...values,userId,goodsId});
        console.log(values.img);


   let {data:{code}} = await axios.post('/fxs/addComment',{...values,userId,goodsId})
        if(code === 200){
            Toast.show({
                content: '成功提示',
                icon: 'success',
            })
            navigate('/comment');
        }
    }
    return (
        <>
            <NavBar onBack={back} style={{backgroundColor: '#e8e7e3', height: '5rem'}}>
                评价
            </NavBar>
            <div>
                <Form
                    onFinish={onFinish}
                    labelPosition="right"
                    footer={
                        <>
                            <Button nativeType="submit" block type="primary" >
                                提交
                            </Button>
                        </>
                    }
                >
                    <Form.Item
                        align="center"
                        required
                        label="店铺服务"
                        name="shopRate"
                        rules={[

                            { required: true, message: '请选择星级' },

                        ]}
                    >
                         <Rate count={5} value={shopRate} allowHalf={true} onChange={(e) =>setShopRate(e)} />
                    </Form.Item>
                    <Form.Item
                        align="center"
                        required
                        label="商品评价"
                        name="comment"
                        rules={[

                            { required: true, message: '请选择星级' },

                        ]}
                    >
                        <TextArea maxLength={200}  value={comment} autoSize placeholder="请输入您的评价" onChange={(e) =>setComment(e)} />
                    </Form.Item>
                    <Form.Item
                        align="center"
                        label="图片"
                        name="img"


                    >
                        <Uploader capture url={uploadUrl} multiple maxCount="5"  onSuccess={onSuccess} />
                        {imgList.map((item, index) => {
                            return <img key={index} src={item} alt="" style={{ width: '100%' }}  />
                        })}
                    </Form.Item>


                    <Form.Item
                        align="center"
                        required
                        label="商品评级"
                        name="goodsRate"
                        rules={[

                            { required: true, message: '请选择星级' },

                        ]}
                    >
                        <Rate count={5} value={goodsRate} allowHalf={true} onChange={(e) =>setGoodsRate(e)} />
                    </Form.Item>
                    <Form.Item
                        align="center"
                        required
                        label="物流服务"
                        name="serviceRate"
                        rules={[

                            { required: true, message: '请选择星级' },

                        ]}
                    >
                        <Rate count={5} value={serviceRate} allowHalf={true} onChange={(e) =>setServiceRate(e)} />
                    </Form.Item>
                </Form>
            </div>

        </>
    )
}
